<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>动态组件与v-once指令</title>
  <script src="../asset/js/vue.js"></script>
</head>
<div id="root">
  <component :is='type'></component>
  <!-- <child-one v-if='type==="child-one"'></child-one>
  <child-two v-if='type==="child-two"'></child-two> -->
  <button @click='handleBtnClick'>change</button>
</div>
<script>
  Vue.component('child-one', {
    template: `<div>child-one</div>`
  })
  Vue.component('child-two', {
    template: `<div>child-two</div>`
  })
  let vm = new Vue({
    el: '#root',
    data: {
      type: 'child-one'
    },
    methods: {
      handleBtnClick() {
        this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
      }
    }
  })
</script>

<body>

</body>

</html>